<template>
  <div>
    <p class="test-color test-font" @click="demoMethod(1)">这是pc端 demo 首页</p>
    <span @click="getApiInfo">调用接口</span>
    <!--pc端 elementplus组件使用 直接用-->
    <el-row class="mb-4">
      <el-button @click="alartMessage">Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
  </div>
</template>

<script setup>
// 该处写的setup是语法糖形式，简化了代码，不用再setup() => {} 这种形式了 相当于生命周期 created，script代码就跟写正常js一样
// 创建 基础类型(数字/字符串/null/Boolean)变量用 ref去创建
const a = ref(1)
const b = ref('abc')
const c = ref(null)
const d = ref(true)

// 创建 数组/对象类型的变量用 reactive去创建
let e = reactive({ a: 1, b: 2 })
let f = reactive([1, 2, 3])

// 使用 ref创建的变量 用 xxx.value 去使用
console.log(a.value, b.value, c.value, d.value)

// 使用 reactive创建的变量，直接使用就行
console.log(e, f, e.b, f[0])

// 修改ref创建的变量 用 xxx.value 去赋值
a.value = 2
console.log(a.value)

// 修改reactive创建的变量，直接赋值就行
e = { c: 3, d: 4 }
f[2] = 5
console.log(e, f)

// 创建普通变量/常量，template不会用到，或者不需要监听他的变化，直接定义就可以，这些就不属于像vue2的data变量了，就是普通的变量
const h = 1
const i = { a: 1, b: 2 }

// vue3的生命周期说明
// Vue2--------------vue3

// beforeCreate -> setup()
// created -> setup()
// beforeMount -> onBeforeMount
// mounted -> onMounted
// beforeUpdate -> onBeforeUpdate
// updated -> onUpdated
// beforeDestroy -> onBeforeUnmount
// destroyed -> onUnmounted
// activated -> onActivated
// deactivated -> onDeactivated
// errorCaptured -> onErrorCaptured

// 演示生命周期的使用 其他钩子使用参考 onMounted
onMounted(() => {
  console.log('组件挂载后执行的相关操作')
})

// 演示computed的使用 computed定义的属性与ref或者reactive定义属性用法一致
const sum = computed(() => {
  return a.value * 2 // a属性的变化会导致sum属性发生变化，sum属性依赖a属性的变化
})
console.log(sum.value)

// 演示watch的使用
watch(a, (newVal, oldVal) => {
  console.log('a属性发生变化，监听到了', newVal, oldVal)
})

// 定义method方法 vue3与vue2不同，没有单独的 method代码块，每个方法都会赋值给一个变量
const demoMethod = params => {
  console.log('这是一个样例方法', params)
}

// 获取全局变量/方法，所有的全局变量和方法都在proxy对象下，目前将util.js和axios.js都全局可调用
const { proxy } = getCurrentInstance()
console.log('全局调用方式:', proxy.$Http, proxy.$Util)

// 无接口时mock数据，在mock目录下文件中定义接口返回数据就可以调用，格式如下
//  {
//     url: '/mock/getUser',  // 接口名称
//     method: 'GET',  // 请求方式
//     response: () => {  // 响应结果
//       return {
//         code: 0,
//         message: 'ok',
//         result: ['jiang', 'junfeng']
//       }
//     }
//   }

// 演示http接口的调用 proxy.$Http 接口请求请使用 async/await关键字
const getApiInfo = async () => {
  const res = await proxy.$Http.get('/mock/getUser')
  proxy.$message.success('接口请求成功')
  console.log('接口请求返回数据:', res.data)
}

// 演示UI组件的使用 UI组件 移动端请使用 vant3的 UI组件，pc端使用 elementplus的 UI组件，尽量不要混用

// 提示一条消息
const alartMessage = () => {
  proxy.$message.success('这是一条提示！')
}
</script>
